<template>
  <div class="hot">
    <div class="breadcrumb clearfix">
      <div class="float-left">
        <span>{{breadcrumb.leaveOne}}</span>
        <span v-if="breadcrumb.leaveTwo">&gt;&nbsp;{{breadcrumb.leaveTwo}}</span>
        <span v-if="breadcrumb.leaveThree">&gt;&nbsp;{{breadcrumb.leaveThree}}</span>
      </div>
    </div>
    <template v-for="item in list">
      <item :note="noteStatus" :type="noteType" :content="item"></item>
    </template>
    <div class="load-more-wrap flex">
      <img src="../../assets/svg/load-mord.svg" alt="" v-if="loadStatus">
      <button v-else @click="loadMore">加载更多</button>
    </div>
  </div>
</template>
<script>
  import item from '../../components/news/imgListItem'
  import request from '../../../api/request'
  export default {
    name: 'hot',
    components: {
      item
    },
    data () {
      return {
        noteStatus: true,
        noteType: 'origin',
        loadStatus: false,
        page: 1,
        pageSize: 30,
        list: [],
        id: 1
      }
    },
    computed: {
      breadcrumb () {
        return this.$store.state.news.breadcrumb
      }
    },
    created () {
      this.id = parseInt(this.$route.params.id)
      let data = {
        page: this.page,
        pageSize: this.pageSize,
        category_id: this.id
      }
      this.req(data)
    },
    watch: {
      $route () {
        this.loadStatus = true
        this.list = []
        this.page = 1
        this.id = parseInt(this.$route.params.id)
        let data = {page: this.page, pageSize: this.pageSize, category_id: this.id}
        this.req(data)
      }
    },
    methods: {
      loadMore () {
        this.loadStatus = true
        let data = {
          page: this.page,
          pageSize: this.pageSize,
          category_id: this.id
        }
        this.req(data)
      },
      req (data) {
        request.get('hotTopics', data).then((response) => {
          if (response.data.code === '200') {
            this.list = this.list.concat(response.data.data.items)
            this.page++
            this.loadStatus = false
          }
        })
        // if (routerId === 1) {  // 如果是请求热门话题的全部数据接口
        //   this.noteStatus = false
        //   reqFn('topics')
        // } else if (routerId === 2) {  // 如果是请求热门话题的千里马俱乐部接口
        //   this.noteStatus = false
        //   reqFn('topicsSwiftHorse')
        // } else if (routerId === 3) { // 如果是请求热门话题ico项目最新动向接口
        //   this.noteStatus = false
        //   reqFn('topicsIco')
        // } else if (routerId === 4) {  // 如果是请求热门话题新三板股权变更通知接口
        //   this.noteStatus = false
        //   reqFn('topicsNewThree')
        // } else if (routerId === 5) {  // 如果是请求热门话题人工智能行业速报
        //   this.noteStatus = false
        //   reqFn('topicsAi')
        // } else if (routerId === 6) {  // 如果是请求热门话题AR/VR行业速报
        //   this.noteStatus = false
        //   reqFn('topicsARVR')
        // } else if (routerId === 7) {  // 如果是请求热门话题每日项目推荐
        //   reqFn('topicsEveryday')
        // } else {  // 如果是请求热门话题区块链
        //   reqFn('topicsBlock')
        // }
      }
    }
  }
</script>
<style lang="scss">

</style>
